<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>综合管理系统</title>
<link th:href="@{/static/bootstrap/fileUpload/fileinput.min.css}" rel="stylesheet"/>
<link th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/static/bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"/>
<link th:href="@{/static/bootstrap/toastr/toastr.min.css}" rel="stylesheet"/>
<link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>
</head>
<style type="text/css">
	.sp-cen{
		vertical-align: sub;
		margin-left: -15px;
		font-size: 10px;
	}
	.row{
		margin-bottom:5px;
	}
	.has_feedback{
		top:-25px;
		left: 180px;
	}
</style>
<body style="width: 100%;height:auto;background: white no-repeat">
<!-- <body style="width: 100%;height:auto;background: url('/imgs/bgd1.png') no-repeat"> -->
<div class="signinpanel">
    <div class="container" style="height:100%;margin-top:5%;">
        <div class="col-sm-7">
            <p type="text" th:value="${msg}"></p>
        </div>
        <div class="col-sm-5">
        <div class="panel panel-default" style="width: 90%;height:100%;">
        <div class="panel-heading" style="background:#2f3748;">
            <h3 class="panel-title" style="color:#3c7ab8;text-align:center;font-size:20px;">欢迎使用</h3>
      	</div>
      	<div class="panel-body">
	        <ul id="myTab" class="nav nav-tabs">
				<li class="active" style="width: 50%;"><a href="#password" data-toggle="tab" style="text-align:center;">用户名密码登录 </a></li>
				<li style="width: 50%;"><a href="#phone" data-toggle="tab" style="text-align:center;">短信验证码登录</a></li>
			</ul>
			<div id="myTabContent" class="tab-content" style="margin-top: 20px;">
				<div class="tab-pane fade in active" id="password">
		            <form id="passForm" role="form" class="form-horizontal" method="post" action="/login">
		                <div class="row">
		                	<div class="col-lg-7 ">
		                		<input type="text" name="username" id="username" class="form-control"  placeholder="用户名/手机号/邮箱" required/> 
		                		<span class="glyphicon glyphicon-user has_feedback"></span>
		                	</div>
		                	<div class="col-lg-5"><span class="sp-cen">没有账号？ <a data-toggle="modal" data-target="#register" href="" style="margin-left:0px;">立即注册&raquo;</a></span></div>
		                </div>
		                <div class="row">
			                <div class="col-lg-7">
			                	<input type="password" name="password" id="password" class="form-control"  placeholder="请输入密码" required/>
			                	<span class="glyphicon glyphicon-lock has_feedback"></span>
			                </div>
			                <div class="col-lg-5"><span class="sp-cen">忘记密码？ <a id="resetPassword" href="#">找回密码&raquo;</a></span></div>
		                </div>
		                <div class="row">
							<div class="col-lg-4">
							    <input type="text" name="picCode" id="picCode" class="form-control" placeholder="验证码" maxlength="4" autocomplete="off" required>
							</div>
							<div class="col-lg-4">
								<img src="/getPicCode" title="点击刷新"  height="34" width="80" style="margin-left:-20px" id="picture" >
							</div>
		                </div>
		                <div class="row">
			                <div class="col-lg-12">
							    <input type="checkbox" name="rememberMe" id="rememberMe" checked="checked" > <label for="rememberMe">记住我</label>
							</div>
						</div>
						<div class="row">
							<div class="col-lg-12">
								<div style="text-align:center;">
		                		<input type="submit" class="btn btn-success" id="btnSubmit1" value="登陆"/>&nbsp;&nbsp;&nbsp;
		                		<input type="reset" class="btn btn-default" id="btnReset" />
								</div>
							</div>
						</div>
		            </form>
            </div>
			<div class="tab-pane fade" id="phone">
				<form id="phoneForm">
					<div class="row">
	                	<div class="col-lg-7 ">
	                		<input type="text" id="phone" name="phone" class="form-control"  style="width: 105%;" placeholder="请输入手机号"/> 
	                		<span class="glyphicon glyphicon-phone has_feedback"></span>
	                	</div>
	                	<div class="col-lg-5"><span class="sp-cen">号码未注册？ <a href="#" style="margin-left:0px;">立即注册&raquo;</a></span></div>
	                </div>
	                <div class="row">
		                <div class="col-lg-4">
		                	<input type="text" name="pheCode" class="form-control"  placeholder="验证码"/>
		                </div>
		                <div class="col-lg-6">
		                	<button type="button" id="msgBtn" class="btn btn-default"  style="width: 110px;margin-left: -20px;"
		                		data-toggle="popover" >发送验证码
            				</button>
		                </div>
		            </div>
					<div class="row" style="margin-top:30px;">
						<div class="col-lg-12">
							<div style="text-align:center;">
	                		<input type="button" class="btn btn-success" id="btnSubmit2" value="登陆">&nbsp;&nbsp;&nbsp;
	                		<input type="reset" class="btn btn-default" id="btnReset2" />
							</div>
						</div>
					</div>		            
				</form>
			</div>
			</div>
			</div>
			</div>
        </div>
    </div>
</div>
<!-- 页脚 -->
<div class="container" th:replace="commons :: footer"></div>
<!-- 注册模态框 -->
<div id="register" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h3 class="text-center" style="margin-top:0px;margin-bottom:0px;">注册</h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="registerForm" enctype="multipart/form-data">
					  <div class="form-group">
					    <label for="username" class="col-sm-2 control-label">账号</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control" id="username" name="username" placeholder="至少2位字母或数字">
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="realname" class="col-sm-2 control-label">昵称</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control" id="realname" name="realname" placeholder="请输入你的昵称">
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="password" class="col-sm-2 control-label">密码</label>
					    <div class="col-sm-10">
					      <input type="password" class="form-control" name="password"  id="password" placeholder="6-15位字母或数字">
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="password1" class="col-sm-2 control-label">确认密码</label>
					    <div class="col-sm-10">
					      <input type="password" class="form-control" id="password1" name="password1" placeholder="两次密码必须一致">
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="phone" class="col-sm-2 control-label">电话</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control" name="phone" id="phone" placeholder="11位有效数字">
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="firstname" class="col-sm-2 control-label">邮箱</label>
					    <div class="col-sm-10">
					      <input type="email" class="form-control" id="email" name="email" placeholder="例如:liup@163.com">
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="headPicture" class="col-sm-2 control-label">头像</label>
					    <div class="col-sm-10">
							<input id="headPicture"  name="headPicture" type="file" class="file" />
					    </div>
					  </div>
                        <div class="text-right">
                            <input type="button" class="btn btn-primary" id="registerBtn"  value="提交"></input>
                            <button class="btn btn-danger" data-dismiss="modal">取消</button>
                        </div>
                        <a href="" data-toggle="modal" data-dismiss="modal">已有账号？返回登录</a>
                </form>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/static/js/jquery-2.1.1.min.js}"></script>
<script th:src="@{/static/bootstrap/toastr/toastr.min.js}"></script>
<script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/static/bootstrap/js/bootbox.js}"></script>
<script th:src="@{/static/bootstrap/validator/js/bootstrapValidator.js}" type="text/javascript"></script>
<script th:src="@{/static/bootstrap/fileUpload/fileinput.min.js}" type="text/javascript"></script>
<script th:src="@{/static/bootstrap/fileUpload/zh.js}" type="text/javascript"></script>
<script th:src="@{/static/js/common.js}" type="text/javascript" ></script>
<script th:src="@{/static/js/aboutLogin.js}" type="text/javascript" ></script>
</body>
</html>